<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>客户</el-breadcrumb-item>
				<el-breadcrumb-item>个人客户列表</el-breadcrumb-item>
			</el-breadcrumb>
						<help-components>
				<span slot="headText">{{vue_helpData.templateName}}</span>
				<p slot="headDescText" v-html="vue_helpData.templateRemark"></p>
				<div slot="helpContentWrap">
					<div v-for="(item,index) in vue_helpData.questionAndAnswerArray">
						<h3>{{item.templateContent}}</h3>
						<p v-html="item.templateRemark"></p>
					</div>
				</div>
			</help-components>
		</div>
		<!--start content-->
		<div class="content" id="content">
			<!--高级搜索-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="vue_button_add"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="vue_button_add">
						<div class="search-title">
							<p>高级搜索</p>
						</div>
						<div class="form">
							<ul>
								<li>
									<span style="margin-right: 2px;">关键词</span>
									<div style="width: 356px;"><input type="" v-model="basicMemberQb.fullTextFilterStr" placeholder="请输入客户名称/客户编码/登录账号/联系方式" /></div>
								</li>
								<li class="formLi">
									<span>客户级别</span>
									<el-select v-model="basicMemberQb.gradeCode" clearable placeholder="请选择" >
										<el-option v-for="item in memberGrade.list"
											:key="item.gradeCode"
											:label="item.gradeName"
											:value="item.gradeCode">
										</el-option>
									</el-select>
								</li>
								<li style="text-align: left;">
									<p style="float: left;margin-left: 28px;margin-top: 10px;">
										<span style="margin-right: 0px;">客户状态</span>
										<template>
											<el-radio-group v-model="basicMemberQb.dataBillstate">
												<el-radio class="radio" label="2">全部</el-radio>
												<el-radio class="radio" label="0">启用</el-radio>
												<el-radio class="radio" label="1">停用</el-radio>
											</el-radio-group>
										</template>
									</p>
								</li>
							</ul>

						</div>
						<div class="search-btn">
							<el-button @click="advSearch_ok" type="primary">确定</el-button>
							<el-button @click="advSearch_cancel">取消</el-button>
						</div>
					</div>
				</transition>
			</div>
			<!---->
			<div class="piliangCao sousuo " v-if="vue_sousuo">
				搜索结果
				<em style="font-style: normal;margin: 0px 20px;">|</em>
				<a @click="advSearch_disable"><em class="iconfont">&#xe66b;</em>清除搜索</a>
				<a @click="advSearch_enable"><em class="iconfont">&#xe62d;</em>继续搜索</a>
			</div>
			<div class="piliangCao" v-if="vue_checked_tabactive>0 && vue_sousuo==false" >
				<em class="iconfont" @click="off" style="margin: 2px 20px;position: relative;top: 2px;cursor: pointer;">&#xe630;</em>
				已选<span>{{vue_checked_tabactive}}</span>项<em style="font-style: normal;margin: 0px 20px;">|</em>
				<a @click="batchEnable"><em class="iconfont">&#xe767;</em>批量启用</a>
				<a @click="batchDisable"><em class="iconfont">&#xe63a;</em>批量停用</a>
			</div>

			<div class="public-th clearfix" v-if="vue_checked_tabactive==0">
				<div class="public-left clearfix">
					<div class="slideBtn fl" >
						<el-select v-model="basicMemberQb.gradeCode" @change="handleCommand" placeholder="全部级别">
							<el-option key="1" label='全部级别' value=''>
								全部级别
							</el-option>
							<el-option v-for="item in memberGrade.list"
								:key="item.gradeCode"
								:label="item.gradeName"
								:value="item.gradeCode">
							</el-option>
						</el-select>
					</div>
					<div class="public-left clearfix">
						<div class="goods-input">
							<input @keydown.enter="queryByPage" type="text" v-model="basicMemberQb.fullTextFilterStr" placeholder="请输入客户名称/客户编码/联系方式" /><i @click="queryByPage"></i>
						</div>
					</div>
					<span class="fl search-openBtn" id="search-openBtn" @click="advSearch_showDialog">高级搜索</span>
				</div>
				<div class="public-right clearfix">
					<!--<a>导出</a>
					<a>导入</a>-->
					<router-link to="/addkehu" style="background: #13c19f;color: #fff;border: 0;">新增</router-link>
				</div>
			</div>
			<div class="table contentBodyCon kehutable" :class="{beforeNone:basicMemberSet.list.length!='0'}" id="table">
				<el-table  ref="multipleTable" :row-class-name="disableStateBtn" :data="basicMemberSet.list" style="width: 100%;  z-index: 10;"  :max-height="vue_tableH" @selection-change="handleSelectionChange" @sort-change="vFun_sort" >
					<el-table-column type="selection" width="60"></el-table-column>
					<el-table-column prop="memberCode" label="客户编码" sortable="custom"  width="180"></el-table-column>
					<el-table-column prop="memberName" label="客户名称" sortable="custom" width="150"  to="/row_updatekehu">
						<template scope="scope">
                        	<p class="pkehuName">
								<span @click="row_detail(scope.row)" v-html="scope.row.memberName"></span>
							</p>
						</template>
					</el-table-column>
					<el-table-column prop="gradeName" label="级别"  width="150"></el-table-column>
					<el-table-column prop="operatorAccount" label="登录账号" width="200"></el-table-column>
					<el-table-column prop="operatorPhone" label="联系方式" width="150"></el-table-column>
					<el-table-column prop="dataBillstateStr" sortable="custom" label="状态" width="110" ></el-table-column>
					<el-table-column prop="createDateStr" sortable="custom" label="创建时间"  min-width="200"> </el-table-column>
					<el-table-column prop="" label="" fixed="right" width="60" >
						<template scope="scope">
							<el-popover trigger="hover" placement="bottom">
								<p class="p" style="cursor: pointer;" @click="row_detail(scope.row)">
									<em class="iconfont">&#xe617;</em>修改
								</p>
								<p class="p" style="cursor: pointer;" @click="Delete(scope.$index, basicMemberSet.list)"><em class="iconfont">&#xe644;</em>作废</p>
								<p class="p" style="cursor: pointer;" v-if="'1'==basicMemberSet.list[scope.$index].dataBillstate" @click="qiyong(scope.$index, basicMemberSet.list)"><em class="iconfont">&#xe767;</em>启用</p>
								<p class="p" style="cursor: pointer;" v-if="'0'==basicMemberSet.list[scope.$index].dataBillstate" @click="jinyong(scope.$index, basicMemberSet.list)"><em class="iconfont">&#xe63a;</em>停用</p>
								<div slot="reference" class="name-wrapper" style="text-align: center;">
									<em class="iconfont tab-hover">&#xe607;</em>
								</div>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="block">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="parseInt(basicMemberSet.pageTools.pageNo)"
					:page-sizes="basicMemberSet.pageTools.pageSizeOptions"
					:page-size="parseInt(basicMemberSet.pageTools.pageSize)"
					:total="parseInt(basicMemberSet.pageTools.recordCount)"
					layout="total, prev, pager, next, sizes,jumper">
				</el-pagination>
			</div>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
		data() {
			return {
				vue_helpData:{
					templateName:"",
					templateRemark:"",
					questionAndAnswerArray:[]
				},
				basicMemberSet:{
					"list":[],  //数据列表
				    "page":{},	//分页数据
					"sumInfo":{}, //汇总信息
				},
				basicMemberQb:{
					gradeCode:"",
					fullTextFilterStr:"",
					dataBillstate:"",
					orderStr:'',
				},
				vue_sousuo:false,							//清除
				vue_tableH: null,
				vue_button_add: false,
				vue_button_show: true,
				vue_allOrder: false,
				vue_checked_tabactive:'',							//全选
				memberGrade:{
					list:[],						//高级搜索客户级别
				},
				vue_row_rechargeCodeStr:"",                 //多选框选中值
			}
		},
		methods: {
      //禁用后行数变灰  start
      disableStateBtn(rowData, index) {
        return rowData.dataBillstate == "1" ? "grayColor" : "";
      },

	    	vFun_sort(type){
	    		if(type.order==='ascending'){
	    			this.basicMemberQb.orderStr=type.prop
	    		}else if(type.order==='descending'){
	    			this.basicMemberQb.orderStr=type.prop +' desc'
	    		}else{
	    			this.basicMemberQb.orderStr=''
	    		};
	    		this.queryByPage();
	    	},
//多选
			handleSelectionChange(val) {
				this.multipleSelection = val;
				this.vue_checked_tabactive=val.length;
		        //获取选中值
		        this.vue_row_rechargeCodeStr = "";
				for(let i=0,len=val.length;i<len;i++){
					this.vue_row_rechargeCodeStr += val[i].memberCode+","
				}
				this.vue_row_rechargeCodeStr = this.vue_row_rechargeCodeStr.substring(0,this.vue_row_rechargeCodeStr.length-1);
				if (this.vue_checked_tabactive!=0) {
					this.vue_sousuo=false
				}
			},
//关闭已选
			off(){
				this.vue_checked_tabactive = '';
				this.vue_button_show=true;
				this.$refs.multipleTable.clearSelection()
			},
//---------------------查询个人客户列表------------------------
			queryByPage(){
				this.axios({
					method: 'post',
					url: "/v3/basic/members/list",
					data:{
						"limit":this.basicMemberSet.pageTools.pageSize,
						"offset":(this.basicMemberSet.pageTools.pageNo-1)*this.basicMemberSet.pageTools.pageSize,
						"fullTextFilterStr":this.basicMemberQb.fullTextFilterStr,
						"gradeCode":this.basicMemberQb.gradeCode,
						"dataBillstate":this.basicMemberQb.dataBillstate,
						 "orderStr":this.basicMemberQb.orderStr
					}
				}).then((res) => {
					this.basicMemberSet.list = res.data.list;
					this.basicMemberSet.pageTools=res.data.pageTools;
					this.basicMemberSet.pageTools.pageSizeOptions = JSON.parse(this.basicMemberSet.pageTools.pageSizeOptions);
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
			    });
			},
//---------------------分页查询-----------------------------
			handleSizeChange(val) {
				this.basicMemberSet.pageTools.pageSize = val;
				this.queryByPage();
			},

			handleCurrentChange(val) {
				this.basicMemberSet.pageTools.pageNo = val;
				this.queryByPage();
			},
//---------------------级别下拉框修改--------------------------
			handleCommand() {
				this.basicMemberQb.fullTextFilterStr='';
				this.basicMemberQb.dataBillstate = '';
				this.queryByPage();
			},
			//开通
			qiyong(index, data) {
				this.$confirm('确认启用此用户？', '确认', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        cancelButtonClass:"fr",
			        confirmButtonClass:"fr",
			        customClass:"clearfixBox"
			    }).then(() => {
					this.axios({
						method: 'patch',
						url: "/v3/basic/members/"+data[index].memberCode+"/batchEnable",
						data: {}
					}).then((res) => {
						this.axios({                              //开通之后刷新页面
							method: 'post',
							url: "/v3/basic/members/list",
							data:{
								"limit":this.basicMemberSet.pageTools.pageSize,
								"offset":(this.basicMemberSet.pageTools.pageNo-1)*this.basicMemberSet.pageTools.pageSize
							}
						}).then((res) => {
							this.$notify({
					          message: '操作成功！',
					          type: 'success',
					          duration:3000
					      });
							this.basicMemberSet.list = res.data.list;

						}).catch((err)=>{
							this.Public.openError(this,err.response.data);
					    });
					}).catch((err)=>{
					    this.Public.openError(this,err.response.data);
				    });
				})
			},
//			//禁用
			jinyong(index,data){
				this.$confirm('确认禁用此用户？', '确认', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        cancelButtonClass:"fr",
			        confirmButtonClass:"fr",
			        customClass:"clearfixBox"
			    }).then((res) => {
						this.axios({
							method: 'patch',
							url: "/v3/basic/members/"+data[index].memberCode+"/batchDisable",
							data: {}
						}).then((res) => {
							this.$notify({
					          message: '操作成功！',
					          type: 'success',
					          duration:3000
					      });
							var limit=this.basicMemberSet.pageTools.pageSize;
							var offset=(this.basicMemberSet.pageTools.pageNo-1)*this.basicMemberSet.pageTools.pageSize;
							this.queryByPage(limit,offset);
					}).catch((err)=>{
					    this.Public.openError(this,err.response.data);
				    });
				}).catch((err)=>{
					    this.Public.openError(this,err.response.data);
				    });
			},

			batchEnable(){						//批量启用
				this.axios({
					method: 'PATCH',
					url: "/v3/basic/members/"+this.vue_row_rechargeCodeStr+"/batchEnable",
					data:{}
				}).then((res) => {
						var limit = this.basicMemberSet.pageTools.pageSize;
						var offset= (this.basicMemberSet.pageTools.pageNo-1)*this.vue_page_yetiao;
						this.queryByPage(limit,offset);
						this.$notify({
					          message: '操作成功！',
					          type: 'success',
					          duration:3000
					      });
				}).catch((err)=>{
				    this.Public.openError(this,err.response.data);
			    });
			},
			batchDisable(){									//批量停用
				this.axios({
					method: 'patch',
					url: "/v3/basic/members/"+this.vue_row_rechargeCodeStr+"/batchDisable",
					data: {}
				}).then((res) => {
					 var limit = this.basicMemberSet.pageTools.pageSize;
					 var offset = (this.basicMemberSet.pageTools.pageNo-1)*this.vue_page_yetiao;
					 this.queryByPage(limit,offset);
					 this.$notify({
			          message: '操作成功！',
			          type: 'success',
			          duration:3000
			        });
				}).catch((err)=>{
				   this.Public.openError(this,err.response.data);
			    });
			},
			//删除
			Delete(index, data) {
				this.$confirm('确认作废此用户？', '确认', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        cancelButtonClass:"fr",
			        confirmButtonClass:"fr",
			        customClass:"clearfixBox"
				}).then(() => {
					this.axios({
						method: 'delete',
						url: "/v3/basic/members/"+data[index].memberCode,
						data: {}
					}).then((res) => {
							var limit = this.basicMemberSet.pageTools.pageSize;
							var offset = (this.basicMemberSet.pageTools.pageNo-1)*this.vue_page_yetiao;
							this.queryByPage(limit,offset);
							this.$notify({
						          message: '操作成功！',
						          type: 'success',
						          duration: 3000
					        });
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
			    });
			}).catch((err)=>{
			   this.Public.openError(this,err.response.data);
		    });
		},

		//详情
		row_detail(data){
			localStorage.setItem("memberCode",data.memberCode);
			window.location.hash = "#/modifykehu"
		},
	//存储需要修改的客户的唯一标识
		row_update(data) {
				localStorage.setItem("memberCode",data.memberCode);
				window.location.hash = "#/row_updatekehu"
			},
//-------------------高级搜索----------------------------
		advSearch_showDialog(){
			this.vue_button_add=true;
			this.basicMemberQb.fullTextFilterStr='';
		},

		advSearch_ok() {										//高级搜索
//    this.basicMemberQb.fullTextFilterStr='';
			if (this.basicMemberQb.dataBillstate=='2') {
				this.basicMemberQb.dataBillstate=''
			};
			this.queryByPage();
			this.vue_button_add = !this.vue_button_add;
			this.vue_sousuo=true;
			this.vue_checked_tabactive="2";

		},
		advSearch_disable(){						//清除搜索
				this.basicMemberQb.dataBillstate='';
				this.basicMemberQb.gradeCode='';
				this.vue_sousuo=false;
				this.vue_checked_tabactive="0";
				this.queryByPage();
		},

		advSearch_enable(){						//继续搜索
			this.vue_button_add = true;
			if (this.basicMemberQb.dataBillstate=='') {
				this.basicMemberQb.dataBillstate='2'
			}
		},

//取消高级查询
		advSearch_cancel() {
				this.vue_button_add = !this.vue_button_add;
				this.basicMemberQb.fullTextFilterStr='';
				this.basicMemberQb.dataBillstate='';
				this.basicMemberQb.gradeCode='';
				this.vue_sousuo=false;
				this.vue_checked_tabactive="0";
			},

//---------------------查询会员等级-----------------------
		query_memberGrade(){
				//获取会员级别
				this.axios({
					method: 'post',
					url: "/v3/member/grades/listAll",
					data:{}
				}).then((res) => {
						this.memberGrade.list = res.data.list;
				}).catch((err)=>{
				    this.Public.openError(this,err.response.data);
			    });
			},
//---------------------查询帮助信息------------------------
			query_systemTemplate(){
				this.axios({
					method:"GET",
					url:"/v3/system/templates/00100000002"
				}).then((res)=>{
						this.vue_helpData.templateName = res.data.templateName;
						this.vue_helpData.templateRemark = res.data.templateRemark;
						this.vue_helpData.questionAndAnswerArray = res.data.questionAndAnswerArray;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
				})
			},
		},
		created(){
			this.basicMemberSet.pageTools = this.$store.state.page; //分页数据
		},
		mounted() {
			document.querySelector('body').onclick = () => {
				if(this.vue_allOrder == true) {
					this.vue_allOrder = false;
				}
			};
			this.queryByPage();
			this.query_memberGrade();
			//设置窗口高度
			var winHieg = document.documentElement.clientHeight;
			var cont = document.getElementById("content");
			cont.style.height = winHieg - 115 + "px";
			this.vue_tableH = document.documentElement.clientHeight - 240;

			//帮助功能
			this.query_systemTemplate();
		},
	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}

	.content {
		background: #fff;
		padding: 15px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}

	.public-th {
		min-width: 750px;
		position: relative;
		z-index: 100;
	}

	.public-left {
		float: left;
	}

	.public-left a,
	.public-left span.search-openBtn {
		display: block;
		float: left;
		margin-right: 10px;
		padding-right: 0px;
		position: relative;
		height: 36px;
		line-height: 36px;
		z-index: 100;
		cursor: pointer;
	}
	.search-openBtn{
		color:#93a6b7;
	}
	.goods-input input {
		display: block;
		float: left;
		width: 400px;
		height: 34px;
		font-size: 12px;
		border: 0;
		margin-left: 20px;
	}

	.public-right {
		float: right;
		overflow: hidden;
	}

	.public-right a {
		display: block;
		float: left;
		margin-left: 10px;
		width: 80px;
		height: 32px;
		box-sizing: border-box;
		text-align: center;
		line-height: 32px;
		border-radius: 30px;
		border: 1px solid #cdd9e6;
		cursor: pointer;
	}

	.public-left a:hover {
		text-decoration: none;
	}

	.public-left a em {
		display: inline-block;
		position: relative;
		font-size: 14px;
	}

	.return-goods .public-left a i {
		position: static;
		width: 20px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		background: none;
		background-size: 18px;
		-webkit-transition: .2s;
		transition: .2s;
		vertical-align: middle;
	}

	.public-right a:hover {
		text-decoration: none;
	}


	.goods-input {
		float: left;
		width: 450px;
		border: 1px solid #cdd9e6;
		border-radius: 30px;
		margin-right: 10px;
		cursor: pointer;
	}

	.goods-input:hover {
		border-color: #13C19F;
		transition: 1s;
	}

	.goods-input i {
		cursor: pointer;
	}


	.table {
		margin-top: 15px;
	}

	.table th {
		height: 50px;
	}

	.el-table th>.cell {
		word-wrap: normal;
		text-overflow: ellipsis;
		line-height: 20px;
		width: 100%;
		box-sizing: border-box;
		font-weight: normal!important;
		font-size: 14px;
	}

	.el-table {
		font-size: 12px!important;
		font-weight: normal!important;
	}

	.block {
		float: right;
		margin: 15px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .3s
	}

	.fade-enter,
	.fade-leave-active {
		/*transform: translateY(-100px);*/
		opacity: 0
	}

	.goods-fei i {
		font-size: 14px;
	}

	.tab-hover {
		color: #b7c6d6;
		cursor: pointer;
	}

	.el-tag {
		background-color: inherit;
		color: #b7c6d6;
	}

	.el-popover {
		min-width: 100px;
	}
	.pkehuName span{
		cursor: pointer;
	}

	.pkehuName span:hover{
		color: #03B8CC;
	}
	.p {
		text-indent: 10px;
		line-height: 30px;
	}

	.p em {
		position: relative;
		top: 2px;
		margin-right: 3px;
	}

	.p:hover {
		background: #eef1f9;
		color: #03B8CC;
	}
	.piliangCao{
		margin-left: -6px;
		height: 36px;
		line-height: 36px;
	}
	.piliangCao em {
		font-size: 14px;
	}

	.piliangCao a {
		cursor: pointer;
		color: #768696;
		margin-right: 20px;
	}
	.piliangCao a:hover{
		color: #03B8CC;
	}
	.el-table--fit {
		border-left: 0;
	}

	.textR {
		text-align: right;
	}

	.font12 {
		font-size: 12px;
	}

	.setbtn {
		margin-left: 30px;
	}

	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 80;
		background-color: rgba(240, 240, 240, 0.2);
	}

	.specific-search {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		padding: 30px;
		z-index: 1005;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
	}

	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
	}

	.form {
		width: 1000px;
		background: #fff;
		margin: 20px 0;
	}

	.search-btn {
		margin-top: 70px;
	}

	.specific-search {}

	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}

	.slideDown-enter,
	.slideDown-leave-active {
		height: 0;
		opacity: 0;
	}

	.form {
		width: 450px;
		text-align: right;
	}

	.form li {
		margin-top: 15px;
	}

	.form input {
		width: 350px;
		height: 32px;
		border: 0;
	}

	.form div {
		width: 358px;
		height: 34px;
		border-radius: 4px;
		text-indent: 5px;
		margin-left: 12px;
		display: inline-block;
		position: relative;
	}

	.form li:first-child div {
		border: 1px solid rgb(191, 212, 217);
	}

	.form li:first-child div input {
		border-radius: 4px;
	}
	.slideBtn .el-input__icon+.el-input__inner{
		padding-right: 0px;
    	width: 100px;
	}
	.sousuo{
		margin-left: 10px;
	}
</style>
